<template>
  <div class="home-content">
    <Row>
      <Col :xs="24" :sm="24" :md="24" :lg="17">
        <div class="layout-left">
          <section-title :mainTitle="problem.name">
<!--                         :btnFlag="true"-->
<!--                         :tipText="'题解'"-->
<!--                         :tipHref="'/answer'">-->
            <title-menu-filter
              slot="menu"
              :menu-filter-list="defaultFilterList"
              :show="false"
            ></title-menu-filter>
          </section-title>
        </div>
        <div id="problemContent" class="cells">
          <VueShowdown
            flavor="allOn"
            :markdown="problem.content"/>
        </div>
        <div>
          <CommonEditor
            @input="changeTextarea"
          ></CommonEditor>
        </div>
        <section-title v-if="codeList.length > 0" :mainTitle="'提交记录'"></section-title>
        <div class="cells">
          <code-list-cell
            v-for="(code, index) in codeList"
            :commit="code"
            :key="code.id"
          ></code-list-cell>
        </div>
      </Col>
      <Col :xs="0" :sm="0" :md="0" :lg="7">
        <div class="layout-right">
          <about></about><br/>
          <friend-links></friend-links><br/>
          <recommend></recommend><br/>
        </div>
        <div class="layout-left"></div>
      </Col>
    </Row>
  </div>
</template>

<script>
import PhotoWall from "@/components/views/PhotoWall";
import SectionTitle from "@/components/views/SectionTitle/SectionTitle";
import TitleMenuFilter from "@/components/views/SectionTitle/TitleMenuFilter";
import About from "@/components/views/About";
import FriendLinks from "@/components/views/FriendLinks";
import TagWall from "@/components/views/TagWall";
import Recommend from "@/components/views/Recommend";
import {DefaultFilterList} from "@/assets/js/const";
import {getProblem} from "../../api/oj/problem";
import {VueShowdown} from 'vue-showdown'
import {commitPage, saveCommit} from "../../api/oj/commit";
import CommitListCell from "../views/commit/CommitListCell";
import CommonEditor from "./CommonEditor.vue";
import { Button, Option, Select } from "element-ui";
import VueCookie from "js-cookie";

export default {
  metaInfo: {
    title: "CODER-OJ",
  },
  data() {
    return {
      defaultFilterList: DefaultFilterList,
      total: null,
      listQuery: {
        userId: VueCookie.get('userInfo') == null ? null : JSON.parse(VueCookie.get('userInfo')).id,
        problemId: this.problem,
        page: 1,
        pageSize: 999,
        status: 1,
      },
      codeList: [],
      problem: null,
      lineNumbers: true, // true为编辑模式， false只展示不可编辑
    };
  },
  components: {
    CommonEditor,
    Option,
    Button,
    Select,
    "photo-wall": PhotoWall,
    "section-title": SectionTitle,
    "title-menu-filter": TitleMenuFilter,
    about: About,
    "friend-links": FriendLinks,
    "tag-wall": TagWall,
    recommend: Recommend,
    "code-list-cell": CommitListCell,
    VueShowdown,
  },
  created() {
    getProblem(this.$route.query.id).then(res => {
      this.problem = res.result;
      this.listQuery.problemId = res.result.id;
      this.getCommitPage();
    });
  },
  mounted() {
    this.$nextTick(() => {
      document.querySelector(".main-wrapper").style.margin = "61px auto";
    });
  },
  methods: {
    getCommitPage() {
      commitPage(this.listQuery).then(res => {
        this.codeList = res.result.list;
      })
    },
    changeTextarea(val) {
      this.code = val
    },
    changePage(page) {
      this.listQuery.page = page;
      this.getList();
    },
    changeSize(size) {
      this.listQuery.pageSize = size;
      this.listQuery.page = 1;
      this.getList();
    },
    highlighter(code) {
      return highlight(code, languages.js); //returns html
    },
  },
  watch: {
    $route () {
      this.$router.go()
    },
  }
};
</script>
<style lang="stylus" scoped rel="stylesheet/stylus">

.cells {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius 8px;
  padding: 15px;
  margin-bottom: 20px;
  transform: translate(-30px, 0);
}
/* required class css样式必写，不然编辑器没有样式，只是纯白页面展示
“height-300” 是给编辑器设置高度的，高度可自行设置，也可以不设置，这个样式非必需*/
.my-editor {
  background: #2d2d2d;
  color: #ccc;

  font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 5px;
}

/* optional */
.prism-editor__textarea:focus {
  outline: none;
}

/* not required: */
.height-300 {
  height: 300px;
}

#problemContent {
  margin-left: 30px;
  li {
    margin-top: 15px;
  }
}

.ivu-modal-footer {
  display: none !important;
}

.home-content {
  width: auto;
  min-height: calc(100vh - 108px);

  @media only screen and (max-width: 768px) {
    margin: 5px 5px 0 5px;
  }

  @media screen and (min-width: 768px) {
    margin: 10px 10px 0 10px;
  }

  @media screen and (min-width: 992px) {
    margin: 15px 35px 0 35px;
  }

  @media screen and (min-width: 1200px) {
    width: 1200px;
    margin: 15px auto 0;
    margin-bottom: 200px;
  }

  .layout-left, .layout-right {
    padding: 0;

    @media only screen and (max-width: 768px) {
      padding: 0;
    }

    @media screen and (min-width: 768px) {
      padding: 0;
    }

    @media screen and (min-width: 992px) {
      padding: 0 10px;
    }

    @media screen and (min-width: 1200px) {
      padding: 0 10px;
    }
  }
}

/* .live-bg{
  background-image:url({{this.imgUrl}})
} */
</style>
